import React from "react";
import { Typography } from "antd";
const { Link } = Typography;

export default function FilesOptions(props) {
  const { value } = props;
  //附件字段解析
  let files = [];
  try {
    files = value ? JSON.parse(value) : [];
  } catch (error) {
    console.error("无效的JSON数据:", error);
    return <div>文件组件解析异常.</div>;
  }

  //文件大小转换
  function formatFileSize(bytes) {
    if (bytes === 0) return "0 Bytes";
    const k = 1024;
    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
    let i = 0;
    while (bytes >= k && i < sizes.length - 1) {
      bytes /= k;
      i++;
    }
    return parseFloat(bytes.toFixed(2)) + " " + sizes[i];
  }

  return (
    <div>
      <ul
        style={{
          display: "flex",
          listStyle: "none",
          padding: 0,
          margin: 0,
          gap: "8px",
          overflowX: "auto",
        }}
      >
        {files.map((file) => (
          <li key={file.fileId} title={formatFileSize(file.filesize)}>
            <Link href={file.fileUrl}>
              {file.originalFilename}
              {file.ext}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}
